<template>
	<view class="GoodsSpecs">
		<view class="section">
			<view class="row" @tap="showSpec(false)">
				<view class="text">已选</view>
				<view class="content">
					<view>{{choosenText}}</view>
				</view>
				<view class="arrow"><view class="icon xiangyou"></view></view>
			</view>
		</view>
		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec(false)">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer" @tap.stop="discard">
				<view class="head">
					<image class="specImg" :src="(selectSpec.img?selectSpecImg:swiperImagesList[0])" @tap="previewImage(selectSpec.img?selectSpecImg:swiperImagesList[0])"></image>
					<view class="specDetail">
						<view class="specPrice">{{'￥' + priceText}}</view>
						<view class="specStock">{{(selectSpec.number !=null && selectSpec.number != undefined)?('库存' + selectSpec.number + '件'):'选择以显示对应库存'}}</view>
						<view class="specChoosen">{{goodsData.specDetail.length > 1?(selectSpec.sku_details_names?('已选：' + selectSpec.sku_details_names):'请选择'):''}}</view>
					</view>
				</view>
				<scroll-view scroll-y="true" class="content">
					<view v-for="(specListItem,specListKey) in goodsData.specList" :key="specListKey">
						<view class="title" v-if="goodsData.specDetail.length > 1">选择{{specListItem.name}}：</view>
						<view class="sp" v-if="goodsData.specDetail.length > 1">
							<view v-for="(specItem,specKey) in specListItem.list" :key="specKey" 
							:class="[{'on':specItem.choosen,'disabled':specItem.hasStock == false}]" 
							@tap="setSelectSpec(specListKey,specKey)">
								{{specItem.name}}
							</view>
						</view>
						<view style="clear:both;"></view>
					</view>
					<view class="length">
						<view class="text">购买数量</view>
						<view class="number">
							<uni-number-box :min="1" :value="choosenNumber" :max="selectSpec.number?selectSpec.number:100000" @change="numberChange"></uni-number-box>
						</view>
					</view>
				</scroll-view>
				<view class="btn"><view class="button" @tap="hideSpec(true)">完成</view></view>
			</view>
		</view>
	</view>
</template>

<script>	
	import uniNumberBox from "@dcloudio/uni-ui/lib/uni-number-box/uni-number-box.vue"
	
	export default {
		name: 'GoodsSpecs',
		components: {
			uniNumberBox
		},
		props: {
			theData: {
				type: Array,
				default: () => {
					return [];
				},
			},
			selected: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				specClass: '', // 规格弹窗css类，控制开关动画,
				selectSpec:{}, // 选中的规格对象
				choosenNumber:1, // 选中数量
			}
		},
		computed: {
			sku() {
				let theList = JSON.parse(JSON.stringify(this.theData));
				return theList.map((item) => {
					let {
						id: id,
						name: name,
						list: list,
						...rest
					} = item;
					list = list.map((item) => {
						let {
							id: id,
							name: name,
							number: number,
							...rest
						} = item;
						return { id, name, number, ...rest };
					});
					return { id, name, list, ...rest };
				});
			},
			choosenText(){//已选的显示文字
				let result = '';
				
				return result
			},
		},
		methods: {
			showSpec(fun) {//规格弹窗
				console.log('show');
				this.specClass = 'show';
				this.specCallback = fun;
			},
			hideSpec(act) {//关闭规格弹窗
				this.specClass = 'hide';
				//回调
				this.selectSpec.id && 
				this.selectSpec.id.split('_').length == this.specListLength &&
				this.choosenNumber > 0 &&
				this.specCallback && 
				this.specCallback(act);
				this.specCallback = false;
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
			},
			specCallback(){
				return;
			},
			discard() {
				
			},
		}
	}
</script>

<style lang="scss">
	@import '../../static/general.css';
	.GoodsSpecs {
		.section{
			background: #fff;
			padding: 20upx 30upx;
			margin-bottom: 10px;
			.row {
				width: 100%;
				display: flex;
				align-items: center;
				margin: 0 0 35upx 0;
				&:last-child{
					margin: 0;
				}
				.text {
					font-size: 24upx;
					color: #a2a2a2;
					margin-right: 20upx;
					width:54upx;
				}
				.content {
					font-size: 28upx;
					display: flex;
					flex-wrap: wrap;
					max-width: 80%;
				}
				.arrow {
					position: absolute;
					right: 4%;
					.icon {
						color: #ccc;
					}
				}
			}
		}
		.popup {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 20;
			display: none;
			.mask{
				position: fixed;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 21;
				background-color: rgba(0, 0, 0, 0.6);
			}
			.layer {
				position: fixed;
				z-index: 22;
				bottom: -80%;
				width: 92%;
				padding: 0 4%;
				height: 80%;
				border-radius: 20upx 20upx 0 0;
				background-color: #fff;
				.content {width: 100%;margin: 20upx 0;}
				.btn {
					width: 92%;height: 100upx;position: absolute;bottom:0;
					.button {
						width: 100%;
						height: 80upx;
						border-radius: 40upx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #f47952;
						font-size: 28upx;
					}
				}
			}
			
			&.show {
				display: block;
				.mask{
					animation: showPopup 0.2s linear both;
				}
				.layer {
					animation: showLayer 0.2s linear both;
				}
			}
			&.hide {
				display: block;
				.mask{
					animation: hidePopup 0.2s linear both;
				}
				
				.layer {
					animation: hideLayer 0.2s linear both;
				}
			}
			&.none {
				display: none;
			}
			&.service {
				.row {
					margin: 30upx 0;
					.title {
						font-size: 30upx;
						margin: 10upx 0;
					}
					.description {
						font-size: 28upx;
						color: #999;
					}
				}
			}
			&.spec {
				.head{
					display:flex;padding:40upx 0 20upx;height: 200upx;
					.specImg{width:200upx;height:200upx;min-width:200upx;}
					.specDetail{
						margin-left: 30upx;height:200upx;
						.specPrice{margin-top: 5upx;font-size: 35upx;font-weight: 600;color: #f47925;}
						.specStock{margin-top: 20upx;color: #999;}
						.specChoosen{
							margin-top: 20upx;
							height:70upx;
							word-break:break-all;
							display:-webkit-box;
							-webkit-line-clamp:2; 
							-webkit-box-orient:vertical;
							overflow:hidden;
						}
					}
				}
				.content{
					height: calc(100% - 400upx);overflow: auto;
					.title {
						font-size: 30upx;
						margin: 30upx 0;
					}
					.sp {
						view {
							float: left;
							font-size: 28upx;
							padding: 5upx 20upx;
							border-radius: 8upx;
							margin: 0 30upx 20upx 0;
							background-color: #f6f6f6;
							&.on {padding: 3upx 18upx;border: solid 1upx #f47925;}
							&.disabled {color:#aaa;}
						}
					}
					.length{
						margin: 30upx 0;
						border-top: solid 1upx #aaa;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-top: 20upx;
						.text{font-size: 30upx;}
						.number{
							height:72upx;
							.uni-numbox{height:72upx;}
						}
					}
				}
			}
		}
	}
</style>
